<template>
  <div class="notive">
    <span class="color-blue">消息</span>
    <van-swipe class="swipe" :autoplay="3000" :height="30" :show-indicators="false" vertical loop>
      <van-swipe-item v-for="(item, index) in listData" :key="index">
        <span @click="routerTo(item)">{{item.label}}</span>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
export default {
  props:['notice'],
  components: {},
  name: "Notice",
  data() {
    return {
      listData:[],
      urlRegexp:[
        [/leave\/list$/g,'/attendance/level'],
        [/suggest\/suggest$/g,'/lifeServe/opinions'],
        [/subsidize\/subsidize$/g,'/lifeServe/support']
      ]
    };
  },
  methods: {
    getListData(){
      _g.apiPost("User/remind",{}).then(res=>{
        var goals=[]
        for(var key in res){
          new Map(this.urlRegexp).forEach((val,key0)=>{
            if(key0.test(res[key].url))res[key].url=val
          })
          if(res[key].number>0){
            goals.push({
              label:`您有${res[key].number}条【${res[key].name}】待处理`,
              url:res[key].url
            })
          }
        }
        this.$set(this,"listData",goals)
      })
    },
    routerTo(item){
      this.$router.push(item.url)
    }
  },
  created() {
    this.getListData()
  }
};
</script>
<style lang="scss" scoped>
.notive {
  height: 60px;
  display: flex;
  overflow: hidden;
  background-color: #fff;

  >span{
    display: inline-block;
    width: 60px;
    font-size: 12px;
    height: 40px;
    line-height: 45px;
    text-align: center;
    margin-top: 10px;
    margin-left: 10px;
    border: 1px solid #4977E7;
    border-radius: 4px;
  }
  .swipe{
    flex: 1;
    padding-top: 10px;
    margin-left: 10px;
    color: #999;
    font-size: 13px;
  }
}
</style>